<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入故事梗概 - AI网文小说创作助手</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="common.css" rel="stylesheet">
</head>
<body>
    <div class="page-container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="container navbar-container">
                <a href="home.html" class="navbar-brand">AI网文小说创作助手</a>
                <div class="navbar-nav">
                    <a href="novel-list.html" class="nav-link">我的小说</a>
                    <a href="genre-selection.html" class="nav-link active">创作中心</a>
                    <a href="profile.html" class="nav-link">
                        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=80&q=80" alt="用户头像" class="avatar">
                    </a>
                </div>
            </div>
        </nav>

        <!-- 主要内容 -->
        <main class="main-content">
            <div class="container">
                <!-- 步骤条 -->
                <div class="steps">
                    <div class="step completed">
                        <div class="step-number">1</div>
                        <div class="step-label">选择流派</div>
                    </div>
                    <div class="step active">
                        <div class="step-number">2</div>
                        <div class="step-label">输入梗概</div>
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <div class="step-label">故事要素</div>
                    </div>
                    <div class="step">
                        <div class="step-number">4</div>
                        <div class="step-label">章节大纲</div>
                    </div>
                    <div class="step">
                        <div class="step-number">5</div>
                        <div class="step-label">章节细纲</div>
                    </div>
                    <div class="step">
                        <div class="step-number">6</div>
                        <div class="step-label">生成正文</div>
                    </div>
                </div>

                <!-- 页面标题 -->
                <div class="mb-8">
                    <h1 class="text-3xl font-bold text-center">输入故事梗概</h1>
                    <p class="text-center text-gray-600 mt-2">请输入您的故事梗概，AI将基于此帮您细化故事要素和生成大纲</p>
                </div>

                <!-- 步骤导航 -->
                <div class="bg-gray-50 p-4 rounded-lg mb-6">
                    <h3 class="font-bold mb-2">创作进度</h3>
                    <div class="flex flex-wrap gap-2">
                        <a href="genre-selection.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-1"></i> 流派：都市-异能流
                        </a>
                        <span class="text-sm px-3 py-1 bg-blue-50 border border-blue-200 rounded flex items-center font-bold">
                            <i class="fas fa-pen text-blue-500 mr-1"></i> 当前：输入梗概
                        </span>
                        <a href="inspiration-generation.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center opacity-75">
                            <i class="fas fa-circle text-gray-300 mr-1"></i> 下一步：故事要素
                        </a>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">您可以随时点击切换到其他步骤，系统会自动保存您的进度</p>
                </div>

                <!-- 当前选择的流派 -->
                <div class="flex justify-center mb-8">
                    <div class="inline-flex items-center bg-blue-50 px-4 py-2 rounded-full">
                        <span class="tag tag-male mr-2">男频</span>
                        <span class="font-bold">都市-异能流</span>
                        <a href="genre-selection.html" class="ml-2 text-blue-600 hover:text-blue-800">
                            <i class="fas fa-edit"></i> 更改
                        </a>
                    </div>
                </div>

                <!-- 梗概输入区域 -->
                <div class="card mb-8">
                    <div class="card-header">
                        <h2 class="card-title">故事梗概</h2>
                        <div class="text-sm text-gray-500">
                            已输入 <span id="word-counter" class="font-bold">0</span> 字
                        </div>
                    </div>
                    <div class="card-body">
                        <textarea id="story-outline" class="form-control" rows="10" placeholder="请输入您的故事梗概，例如：主角李天阳原本是一名普通大学生，在一次偶然的机会下获得了一个神秘的系统，可以看到他人的情感值。从此，他的生活发生了翻天覆地的变化，不仅能够轻松应对各种人际关系，还能在危机时刻洞察他人的真实想法..."></textarea>
                        <div class="flex justify-end mt-4">
                            <button id="expand-button" class="btn btn-secondary" onclick="expandOutline()">
                                <i class="fas fa-magic mr-2"></i> 智能扩写
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 梗概示例 -->
                <div class="mb-8">
                    <div class="flex items-center mb-4">
                        <h2 class="text-xl font-bold">梗概示例</h2>
                        <div class="ml-2 tooltip">
                            <i class="fas fa-question-circle text-gray-400"></i>
                            <span class="tooltip-text">点击示例可直接使用</span>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="border rounded-lg p-4 cursor-pointer hover:bg-gray-50" onclick="document.getElementById('story-outline').value = this.querySelector('p').textContent; countWords(document.getElementById('story-outline'), document.getElementById('word-counter'));">
                            <h3 class="font-bold mb-2">情感读心者</h3>
                            <p class="text-sm text-gray-600">大学生李天阳在一次偶然的机会下获得了一个神秘的系统，可以看到他人的情感值。从此，他的生活发生了翻天覆地的变化，不仅能够轻松应对各种人际关系，还能在危机时刻洞察他人的真实想法。在都市中游刃有余的同时，他逐渐发现这个系统背后隐藏着更大的秘密...</p>
                        </div>
                        <div class="border rounded-lg p-4 cursor-pointer hover:bg-gray-50" onclick="document.getElementById('story-outline').value = this.querySelector('p').textContent; countWords(document.getElementById('story-outline'), document.getElementById('word-counter'));">
                            <h3 class="font-bold mb-2">超能商业大亨</h3>
                            <p class="text-sm text-gray-600">张明是一名普通的销售员，在一次意外中获得了读取他人思想的能力。他利用这一能力在商业谈判中屡战屡胜，迅速崛起成为商业奇才。然而，随着他的能力越来越强，他发现自己卷入了一个庞大的阴谋，一个神秘组织正在寻找和他一样拥有特殊能力的人...</p>
                        </div>
                        <div class="border rounded-lg p-4 cursor-pointer hover:bg-gray-50" onclick="document.getElementById('story-outline').value = this.querySelector('p').textContent; countWords(document.getElementById('story-outline'), document.getElementById('word-counter'));">
                            <h3 class="font-bold mb-2">都市医神</h3>
                            <p class="text-sm text-gray-600">林凡是一名普通医院的实习医生，在一次山区义诊中偶然得到了一部古老的医书。通过修炼医书中的功法，他不仅获得了超强的医术，还能看到人体内的经络和气息流动。凭借这一能力，他开始在医学界崭露头角，同时也引起了某些势力的注意...</p>
                        </div>
                        <div class="border rounded-lg p-4 cursor-pointer hover:bg-gray-50" onclick="document.getElementById('story-outline').value = this.querySelector('p').textContent; countWords(document.getElementById('story-outline'), document.getElementById('word-counter'));">
                            <h3 class="font-bold mb-2">异能保镖</h3>
                            <p class="text-sm text-gray-600">退役特种兵陈强在一次执行任务时被神秘射线击中，醒来后发现自己拥有了超强的反应能力和力量。他以保镖身份隐藏在都市，保护各种重要人物。在一次保护任务中，他发现自己保护的对象竟然与当年的神秘射线有关，而这背后隐藏着一个关乎国家安全的惊天秘密...</p>
                        </div>
                    </div>
                    <div class="text-center mt-4">
                        <a href="#" class="text-blue-600 hover:underline">查看更多示例 <i class="fas fa-chevron-right text-xs"></i></a>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex justify-between">
                    <a href="genre-selection.html" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i> 上一步
                    </a>
                    <a href="inspiration-generation.html" class="btn btn-primary">
                        <i class="fas fa-arrow-right mr-2"></i> 下一步
                    </a>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-gray-800 text-white py-6">
            <div class="container text-center">
                <p class="text-gray-400">© 2023 AI网文小说创作助手. 保留所有权利.</p>
            </div>
        </footer>
    </div>

    <script src="common.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const outlineInput = document.getElementById('story-outline');
            const wordCounter = document.getElementById('word-counter');
            
            // 初始化字数统计
            outlineInput.addEventListener('input', function() {
                countWords(outlineInput, wordCounter);
            });
            
            // 初始化扩写按钮
            const expandButton = document.getElementById('expand-button');
            expandButton.addEventListener('click', expandOutline);
        });
    </script>
</body>
</html> 